<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>全部分类</title>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/update.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" charset="utf-8">
		mui.plusReady(function() {
	        // 隐藏滚动条
            plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
		   
		    $("#typeLeft").height($(window).height()-50);
		    $("#typeRight").height($(window).height()-50);
		  	var qwe = null;
 				//加载课程左边
			  mui.ajax({ //ajax请求
				url: getServerIp + 'AppCourse/courseType',
				//type: 'GET',
				data: {    
	
				}, //传参
				success: function(data, textStatus, jqXHR) {
					document.getElementById('courseType').innerHTML = "";
					var table = document.body.querySelector('#courseType');
				//	var obj = JSON.parse(data);
				var list =  data.courseType;
				if(list==null || list ==""){
					var li = document.createElement('li');
					li.innerHTML = "暂无数据"
					table.appendChild(li);
				}else{
					var list_count = list.length;
					for(var i = 0;i<list_count;i++){
					   var obj = list[i];
						var li = document.createElement('li');
						//新增id属性
						li.id = obj.id;
						if(i==0){
							qwe = obj.id;
						}
							li.className = 'left_list_course';
							li.innerHTML = '<li class="left_list">'+
						'<img src="'+getServerIp+'/Public/Uploads/image/courseType/'+obj.image+'" />'+
							obj.course_type+'</li>';
					
		                table.appendChild(li);
		                
					}
				}
					//---------------------------------------------------------
					//默认打开课程详情页
					mui.ajax({ //ajax请求
						url: getServerIp + 'AppCourse/courseTwoList',
						type: 'GET',
						data: {    
							id:qwe//默认值
						}, //传参
						success: function(data, textStatus, jqXHR) {
							document.getElementById('courseTypeList').innerHTML = "";
							var table2 = document.body.querySelector('#courseTypeList');
							//	var obj = JSON.parse(data);
							var list2 =  data.courseTwoList;
							if(list2==null || list2 ==""){
								var li2 = document.createElement('li');
								li2.innerHTML = '<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
										'<a href="javascript:void(0);">'+
										'<div class="mui-media-body">暂无数据</div>'+
										'</a></li>';
								table2.appendChild(li2);
							}else{
								var list_count2 = list2.length;
								for(var i = 0;i<list_count2;i++){
								   var obj2 = list2[i];
									var li2 = document.createElement('li');
									//新增id属性
									li2.id = obj2.id;
										li2.className = 'twoList';
										li2.innerHTML = '<li class="twoListType" style="padding:5px;">'+
										'<a href="javascript:void(0);">'+
										'<img class="mui-media-object" style="width:100%;border:1px solid #ddd;padding:5px;" src="'+getServerIp+'/Public/Uploads/image/courseTwo/'+obj2.image+'">'+
										'<div class="mui-media-body">'+obj2.course_two+'</div>'+
										'</a></li>';
								
					                table2.appendChild(li2);
					                
								}//end for
							}//endif else
						}
					})	
					
					//--------------------------------------------------------
				   //加载课程样式   
		           var ls = document.getElementsByClassName('left_list_course');
					for (var i = 0; i < ls.length; i++) {
					    var obj = ls[i];
						obj.addEventListener('tap', function() {
		                    $(this).addClass("active");
		                    $(this).siblings().removeClass("active");
		                    $(this).siblings().children().removeClass("active");
		                    //alert(this.getAttribute("id"));
					//打开课程详情页
					mui.ajax({ //ajax请求
						url: getServerIp + 'AppCourse/courseTwoList',
						type: 'GET',
						data: {    
							id:this.getAttribute("id")
						}, //传参
						success: function(data, textStatus, jqXHR) {
							document.getElementById('courseTypeList').innerHTML = "";
							var table2 = document.body.querySelector('#courseTypeList');
							//	var obj = JSON.parse(data);
							var list2 =  data.courseTwoList;
							if(list2==null || list2 ==""){
								var li2 = document.createElement('li');
								li2.innerHTML = '<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
										'<a href="javascript:void(0);">'+
										'<div class="mui-media-body">暂无数据</div>'+
										'</a></li>';
								table2.appendChild(li2);
							}else{
								var list_count2 = list2.length;
								for(var i = 0;i<list_count2;i++){
								   var obj2 = list2[i];
									var li2 = document.createElement('li');
									//新增id属性
									li2.id = obj2.id;
										li2.className = 'twoList';
										li2.innerHTML = '<li class="twoListType">'+
										'<a href="javascript:void(0);">'+
										'<img class="mui-media-object" src="'+getServerIp+'/Public/Uploads/image/courseTwo/'+obj2.image+'">'+
										'<div class="mui-media-body">'+obj2.course_two+'</div>'+
										'</a></li>';
								
					                table2.appendChild(li2);
					                
								}//end for
							}//endif else
						}
					})		
					
						})
					}
				}
			})	
		   
		   /*mui.ajax({ //ajax请求
						url: getServerIp + 'AppCourse/courseList',
						type: 'GET',
						data: {    
							id:1//默认值
						}, //传参
						success: function(data, textStatus, jqXHR) {
							document.getElementById('courseTypeList').innerHTML = "";
							var table2 = document.body.querySelector('#courseTypeList');
						//	var obj = JSON.parse(data);
							var list2 =  data.courseList;
							if(list2==null || list2 ==""){
								var li2 = document.createElement('li');
								li2.innerHTML = "暂无数据"
								table2.appendChild(li2);
							}else{
								var list_count2 = list2.length;
								for(var i = 0;i<list_count2;i++){
								   var obj2 = list2[i];
									var li2 = document.createElement('li');
									//新增id属性
									li2.id = obj2.id;
										li2.className = 'mui-table-view mui-grid-view';
										li2.innerHTML = '<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
										'<a href="javascript:void(0);">'+
										'<img class="mui-media-object" src="'+getServerIp+'/Public/Uploads/image/'+obj2.image+'">'+
										'<div class="mui-media-body">'+obj2.course_name+'</div>'+
										'</a></li>';
								
					                table2.appendChild(li2);
					                
								}//end for
							}//endif else
						}
					})*/	
		   
        });

		</script>

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-bar-nav~.mui-content {
				padding: 0;
			}
			#search {
				width: 72%;
				height: 36px;
                border-radius: 5px;
                background: #fff;
                border: 1px solid #DDDDDD;
                font-size: 14px;
                color: #000;
                padding-left: 10px;
                padding-right:20px; 
                /*margin-left: 40px;*/
                margin-top: 5px;
                /*background:url("images/fdj.png") no-repeat scroll right center transparent;*/ 
                /*background-color:#00CA75 ;*/
                position: absolute;
			}
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding: 10px 0;
                border-bottom: 1px solid #ddd;
			}
			.list_more {
				padding: 10px;
				padding-bottom: 60px;
			}
			.list_more p {
				text-align: center;
                padding: 0px 0 0 10px;
                margin: 0;
                background: white;
                height: 40px;
                line-height: 40px;
                border-radius: 5px;
                color: #83E5AB;
			}
			a:hover {
				color: deepskyblue;
			}
			.left_list {
				list-style-type: none;
				padding: 5px;
			}
			.left_list img {
				width: 30%;
			}
			.active {
				background: #fff;
			}
			.twoList {
				list-style-type: none;
				padding: 0;
				margin: 10px;
			}
			.twoListType {
				float: left;
				width: 50%;
				list-style-type: none;
			}
			.twoListType img {
				width: 80%;
			}
/*菜单样式*/
.menu{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: #2d2d2d 0 0 4px;background:#0099cc;}
.menu.menucurr{ background: #ea4c88;}
.menu ul{width: 100%; height: 100%; }
.menu li{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: #0099cc; color:#fff;}
.menu li.curr{ background: #ea4c88;}
.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav" style="float: left;height: 40px;line-height: 40px;"></span>
				<img src="images/logo.png"  style=" height: 40px;"/>
			</button>
			<input id="search" type="text" placeholder="搜索“舞蹈”试试" />
		</header>  
		<div class="mui-content" style="background: white;margin-top: 40px;margin-bottom: 50px;">
			<div id="typeLeft" style="width: 40%;float: left;background: #DDDDDD;overflow-y: auto;">
				<ul style=" padding: 0; margin: 0;background: #DDDDDD;" id="courseType">
					<!--<li class="left_list active">
						<img src="images/modular_ty.png" />
						体育运动
					</li>
					<li class="left_list">
						<img src="images/modular_qz.png" />
						亲子早教
					</li>
					<li class="left_list">
						<img src="images/modular_kx.png" />
						科学技术
					</li>
					<li class="left_list">
						<img src="images/modular_ms.png" />
						美术绘画
					</li>
					<li class="left_list">
						<img src="images/modular_yq.png" />
						乐器演奏
					</li>
					<li class="left_list">
						<img src="images/modular_sy.png" />
						声乐舞蹈
					</li>
					<li class="left_list">
						<img src="images/modular_gx.png" />
						国学书法
					</li>
					<li class="left_list">
						<img src="images/modular_yy.png" />
						语言交流
					</li>
					<li class="left_list">
						<img src="images/modular_sg.png" />
						手工才艺
					</li>
					<li class="left_list">
						<img src="images/modular_mt.png" />
						模特演绎
					</li>
					<li class="left_list">
						<img src="images/modular_qs.png" />
						情商训练
					</li>
					<li class="left_list">
						<img src="images/modular_qt.png" />
						其他
					</li>-->
				</ul>
			</div>
			<div id="typeRight" style="width: 60%;float: right;overflow-y: auto;background: #FFF;">
				<div class="mui-control-content mui-active">
					<ul class="twoList" id="courseTypeList">
		                <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">篮球</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">武术</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">网球</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">游泳</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">围棋</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">篮球</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">武术</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">网球</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">游泳</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">围棋</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">篮球</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">武术</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">网球</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">游泳</div>
		                    </a>
		                </li>
		                <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                    <a href="#">
		                        <img class="mui-media-object" src="images/yuantiao.jpg">
		                        <div class="mui-media-body">围棋</div>
		                    </a>
		                </li>-->
		            </ul>
				</div>
			</div>
        </div>
	</body>
</html>